import React, {Component} from 'react';
import {View, StyleSheet, TouchableOpacity,Image,Text} from 'react-native';
import Potato from '@greens/potato/src/potato'
import NavigationBar from './navigation/navigation-bar.view';
import ItemCellView from "./items/item-cell/item-cell.view";
import Router from "@greens/onion/src/router";
import {carrotRouterMap} from "./config"

export default class ViewTest extends Potato {
    constructor(props) {
        super(props);
        this.state = {


        };
    }

    render() {
        return (

            <View style={styles.container}>
                <NavigationBar title='UI 通用组件库'/>
                <ItemCellView
                    title={'item-content'}
                    onPress={()=>{
                        Router.openPage({
                            url:carrotRouterMap.itemContentDemo.path
                        })
                    }}
                    showRightAccessory={true}
                />
                <ItemCellView
                    title={'item-header'}
                    onPress={()=>{
                        Router.openPage({
                            url:carrotRouterMap.itemHeaderDemo.path
                        })
                    }}
                    showRightAccessory={true}
                />
                <ItemCellView
                    title={'message-page'}
                    onPress={()=>{
                        Router.openPage({
                            url:carrotRouterMap.messagePageDemo.path
                        })
                    }}
                    showRightAccessory={true}
                />
                <ItemCellView
                    title={'image-box-two-page'}
                    onPress={()=>{
                        Router.openPage({
                            url: carrotRouterMap.imageBox2Demo.path
                        })
                    }}
                    showRightAccessory={true}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F6F6F6',
    },
});
